<template>
    <div id="app">
        <router-view />
    </div>
</template>
<style lang="scss">
#app {
    width: 100%;
    height: 100%;

    .main-content {
        padding: 42px 40px 26px 40px;
        width: 100%;
        height: 100%;
        background: radial-gradient(50% 91% at 0 0, #202C40 0%, #0E1420 91%);
        box-sizing: border-box;
        overflow: hidden;

        .el-form-item {
            width: 100%;
        }

        

        .el-form-item__label {
            font-size: 32px;
            color: #FFFFFF;
            letter-spacing: 0;
            font-weight: 400;
            padding: 15px 10px 15px 0;
        }

        .el-date-editor .el-range__icon, .el-date-editor .el-range-separator {
            line-height: 70px;
            font-size: 32px;
            width: 35px;
            height: 70px;
            color: rgba(255, 255, 255, .38);
        }

        .el-form-item__content {
            width: calc(100% - 80px);

            .el-select {
                width: 100%;
            }

            .el-range-input {
                background: #203455;
                color: rgba(255, 255, 255, .38);
                font-size: 32px;
            }

            .el-input__inner {
                width: 100%;
                height: 70px;
                font-size: 32px;
                background: #203455;
                border-color: transparent;
                color: rgba(255, 255, 255, .38)
            }
        }

        .el-table, .el-table tr, .el-table th.el-table__cell {
            background: #202E45;
        }

        .el-table th.el-table__cell {
            font-size: 32px;
            padding: 17px 0;
            letter-spacing: 0;
            font-weight: 400;
        }

        .el-table .cell {
            line-height: 54px;
            height: 54px;
        }

        .el-table--border, .el-table--group,
        .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
            border-color: #43587A;
        }

        .el-table--border::after, .el-table--group::after, .el-table::before {
            background: #43587A;
        }

        .el-table__empty-text {
            font-size: 32px;
        }

        .el-table thead {
            color: rgba(255, 255, 255, .78)
        }

        .el-table__row .el-table__cell {
            font-size: 32px;
            color: #fff;
            padding: 17px 0;
        }

        .el-table__row {
            &:nth-of-type(odd) {
                background: #162031;
            }
        }

        .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
            background: #354869;
        }

        .el-loading-spinner i, .el-loading-spinner .el-loading-text{
            font-size: 32px;
        }

        .el-step {
           flex-basis: 42%!important; 

           &:last-child {
               flex-basis: 16%!important; 
           }
        }

        .el-step__icon {
            width: 56px;
            height: 56px;
            background: rgba(255,255,255,0.12);
            border-color: #7E8CA0;
            font-size: 40px;
            color: #FFFFFF;
            letter-spacing: 0;
            font-weight: 400;
        }

        .el-step.is-horizontal .el-step__line {
            height: 4px;
            background: #BFC7D2;
            border-radius: 4px;
            top: 26px;
            left: 240px;
            right: 10px;
        }

        .el-step__head.is-success {
            .el-step__icon {
                background: #2683FF;
                border-color: #2683FF;
            }

            .el-step__line-inner {
                border-width: 2px!important;
                border-color: #2683FF;
            }
        }

        .el-step__main {
            white-space: normal;
            text-align: left;
            position: absolute;
            top: 50%;
            height: 56px;
            transform: translate(0, -50%);
            left: 24px;
            padding-left: 46px;
            
            .el-step__title {
                
                line-height: 56px;
                font-size: 40px;
                color: #999999;
                letter-spacing: 0;
                font-weight: 400;
            }

            .el-step__title.is-success {
                color: #FFFFFF;
                font-weight: 600;
            }
            
        }

        
    }

    .store-content {
        .el-table th.el-table__cell {
            font-size: 24px;
            padding: 15px 0;
            letter-spacing: 0;
            font-weight: 400;
        }

        .el-table .cell {
            line-height: 34px;
            height: 34px;
        }

        .el-table__row .el-table__cell {
            font-size: 24px;
            padding: 12px 0;
        }
    }
   
}

.el-message-box {
    width: 590px!important;
    background: #3D4E69!important;
    border-radius: 14px!important;
    border: none!important;
    padding-bottom: 0!important;

    &__header {
        display: none;
    }

    &__content {
        font-size: 36px!important;
        color: #FFFFFF!important;
        letter-spacing: 0;
        font-weight: 400;
    }
}

.el-message-box__message p {
    line-height: 44px!important;
}

.el-message-box__content {
    padding: 46px 40px!important;

    .el-message-box__status {
        font-size: 36px!important;
    }
}

.el-message-box__btns {
    padding: 0!important;
}

.el-message-box__btns {
    width: 100%;
    overflow: hidden;
    .el-button {
        padding: 0!important;
        width: 50%;
        height: 98px;
        font-size: 36px;
        color: #FFFFFF;
        letter-spacing: 0;
        font-weight: 400;
        float: left;
        box-sizing: border-box;
        margin: 0!important;
        background: #3D4E69!important;
        border-radius: 0!important;
        border: none!important;
        border-top: 1px solid rgba(255,255,255,0.40)!important;

        &:first-child {
            border-right: 1px solid rgba(255,255,255,0.40)!important;
        }
    }

    .el-button--primary:hover {
        color: #66b1ff!important;
    }
}

.el-message-box__status+.el-message-box__message {
    padding-left: 65px!important;
}

.el-message-box__status.el-icon-warning {
    color: #2683FF!important;
}

.el-loading-spinner i, .el-loading-spinner .el-loading-text{
    font-size: 32px!important;
}
</style>
